/**
 * 训练状态指示器 Web Component
 * 用法: <training-status-indicator visible="true"></training-status-indicator>
 */
class TrainingStatusIndicator extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    static get observedAttributes() {
        return ['visible'];
    }

    connectedCallback() {
        this.render();
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'visible' && oldValue !== newValue) {
            this.updateVisibility();
        }
    }

    updateVisibility() {
        const visible = this.getAttribute('visible') === 'true';
        this.style.display = visible ? 'block' : 'none';
    }

    render() {
        const visible = this.getAttribute('visible') === 'true';

        this.shadowRoot.innerHTML = `
            <style>
                * {
                    box-sizing: border-box;
                }

                :host {
                    display: ${visible ? 'block' : 'none'};
                }

                .live-indicator {
                    position: fixed;
                    top: max(16px, env(safe-area-inset-top, 16px));
                    left: max(16px, env(safe-area-inset-left, 16px));
                    background-color: rgba(239, 68, 68, 0.95);
                    border-radius: clamp(16px, 4vw, 24px);
                    padding: clamp(6px, 2vw, 10px) clamp(12px, 3vw, 18px);
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    z-index: 9999;
                    backdrop-filter: blur(10px);
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                }

                .live-dot {
                    width: clamp(8px, 2vw, 10px);
                    height: clamp(8px, 2vw, 10px);
                    background-color: #ffffff;
                    border-radius: 50%;
                    margin-right: clamp(6px, 2vw, 8px);
                    animation: liveBlink 1s infinite;
                }

                .live-text {
                    color: #ffffff;
                    font-size: clamp(12px, 3.2vw, 14px);
                    font-weight: bold;
                    white-space: nowrap;
                }

                @keyframes liveBlink {
                    0%, 100% {
                        opacity: 1;
                    }
                    50% {
                        opacity: 0.3;
                    }
                }
            </style>

            <div class="live-indicator">
                <div class="live-dot"></div>
                <span class="live-text">训练中</span>
            </div>
        `;
    }
}

// 注册自定义元素
customElements.define('training-status-indicator', TrainingStatusIndicator);
